<template>
  <div class="ai-model-settings-container">
    <div class="page-header">
      <div class="header-left">
        <h1>大模型设置</h1>
        <el-breadcrumb separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/system' }">系统设置</el-breadcrumb-item>
          <el-breadcrumb-item>大模型设置</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    
    <el-card>
      <h2 class="section-title">大模型配置</h2>
      <el-form :model="modelSettings" label-width="120px" class="model-form">
        <el-form-item label="默认大模型" required>
          <el-select v-model="modelSettings.defaultModel" placeholder="请选择默认大模型">
            <el-option
              v-for="model in availableModels"
              :key="model.value"
              :label="model.label"
              :value="model.value"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="DeepSeek API Key">
          <el-input
            v-model="modelSettings.deepseekApiKey"
            placeholder="请输入DeepSeek API Key"
            type="password"
            show-password
          />
          <div class="form-tip">API Key将被安全存储，用于调用DeepSeek大模型服务。</div>
        </el-form-item>
        
        <el-form-item label="DeepSeek API Base">
          <el-input
            v-model="modelSettings.deepseekApiBase"
            placeholder="请输入DeepSeek API Base URL"
          />
          <div class="form-tip">默认为：https://api.deepseek.com</div>
        </el-form-item>
        
        <el-form-item label="模型调用超时时间">
          <el-input-number
            v-model="modelSettings.timeout"
            :min="10"
            :max="300"
            :step="5"
            placeholder="请输入超时时间"
            style="width: 120px;"
          />
          <span style="margin-left: 8px;">秒</span>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="saveSettings">保存设置</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card style="margin-top: 20px;">
      <h2 class="section-title">大模型测试</h2>
      <div class="test-section">
        <el-button type="success" @click="testModelConnection">测试连接</el-button>
        <div v-if="testResult" class="test-result" :class="testResult.success ? 'success' : 'error'">
          <el-icon>{{ testResult.success ? 'Check' : 'Warning' }}</el-icon>
          {{ testResult.message }}
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import aiModelConfig from '../utils/aiModelConfig';
import type { AIModelType } from '../utils/aiModelConfig';

// 可用的大模型选项
const availableModels = ref([
  { value: 'deepseek-r1', label: 'DeepSeek R1' },
  { value: 'doubao', label: '豆包' },
  { value: 'tongyiqianwen', label: '通义千问' },
  { value: 'chatgpt', label: 'ChatGPT' }
]);

// 模型设置表单
const modelSettings = reactive<{defaultModel: AIModelType | string, deepseekApiKey: string, deepseekApiBase: string, timeout: number}>({
  defaultModel: 'deepseek-r1',
  deepseekApiKey: '',
  deepseekApiBase: 'https://api.deepseek.com',
  timeout: 60
});

// 测试结果
const testResult = ref<{ success: boolean; message: string } | null>(null);

// 从配置管理器加载设置
const loadSettings = () => {
  try {
    const config = aiModelConfig.getConfig();
    Object.assign(modelSettings, config);
  } catch (error) {
    console.error('加载设置失败:', error);
    ElMessage.error('加载设置失败，请刷新页面重试。');
  }
};

// 保存设置到配置管理器
const saveSettings = async () => {
  try {
    // 保存到配置管理器
    aiModelConfig.setDefaultModel(modelSettings.defaultModel as AIModelType);
    
    // 保存超时设置
    aiModelConfig.saveConfig({ timeout: modelSettings.timeout });
    
    // 这里可以添加保存到服务器的逻辑
    // await axios.post('/api/system/ai-model-settings/', modelSettings);
    
    // 显示成功提示
    ElMessage.success('设置保存成功！');
  } catch (error) {
    console.error('保存设置失败:', error);
    ElMessage.error('保存设置失败，请重试。');
  }
};

// 重置表单
const resetForm = () => {
  aiModelConfig.resetConfig();
  loadSettings();
  ElMessage.info('设置已重置为默认值');
};

// 测试模型连接
const testModelConnection = async () => {
  try {
    // 模拟测试连接
    // 实际应用中，这里应该调用真实的API测试端点
    testResult.value = null;
    
    // 检查配置是否有效
    if (!aiModelConfig.isValidConfig()) {
      testResult.value = {
        success: false,
        message: '配置无效，请检查必填项。'
      };
      return;
    }
    
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    testResult.value = {
      success: true,
      message: '大模型连接测试成功！'
    };
    
  } catch (error) {
    testResult.value = {
      success: false,
      message: '大模型连接测试失败，请检查配置。'
    };
  }
};

// 生命周期钩子
onMounted(() => {
  loadSettings();
});
</script>

<style scoped>
.ai-model-settings-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-left h1 {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebeef5;
}

.model-form {
  max-width: 600px;
}

.form-tip {
  color: #909399;
  font-size: 12px;
  margin-top: 4px;
}

.test-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.test-result {
  padding: 10px 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.test-result.success {
  background-color: #f0f9eb;
  color: #67c23a;
}

.test-result.error {
  background-color: #fef0f0;
  color: #f56c6c;
}
</style>